<template>
	<view class="index-container">
		<StatusBar classname="bg-color" />
		
		<view class="header-center bg-color uifont" style="text-align: center;">
			找水
		</view>
		
		<view class="bg-color justify-between" style="padding: 3px 0;">
			<view class="header-left" style="flex: 1;">
				<view class="myicon icon-shouhuodizhi"></view>
				<view class="address">
					{{location.address}}
				</view>
			</view>
		</view>
		<view class="map-container">
			<map v-if="location&&location.latitude" :markers="shops" :latitude="location.latitude" :scale="10" :longitude="location.longitude" :show-location="true" style="width: 750upx;height: 750upx"></map>
			<view class="picker-container">
				<view class="flex-ac">
					<HSelect v-model="form.service" :options="[{name:'热水',value:'热水'},{name:'冷水',value:'冷水'},{name:'WC',value:'WC'}]"/>
					<view class="myicon icon-xiangxia2"></view>
				</view>
			</view>
			<view class="uploader-container">
				<view @click="nav('/pages/water/mch/save')" class="align-center justify-center" style="flex-direction: column;margin-top: 3px;">
					<view class="myicon icon-paizhao" style="font-size: 30px;"></view>
					<view style="margin-top: 2px;" >
						水点拍
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-container">
			<view v-for="(item,index) in shops" :key="index" class="list-item">
				<view class="north-container u-border-bottom">
					<image :src="baseURL+'/'+item.logo_img" mode="aspectFill"></image>
					<view class="base-info-container">
						<view class="name">
							{{item.name}}
						</view>
						<view class="address">
							{{item.address}}
						</view>
						<view class="open-time">
							开放时间：{{item.open_time}}
						</view>
					</view>
					<view class="action-container">
						<view class="tag-container">
							<view @click="openMap(item)" style="border-radius: 50px;padding: 4px 10px;" class="text-color border-color">去这里</view>
						</view>

						<view class="distance">
							{{item.distance}}km
						</view>
					</view>
				</view>
				<view class="footer-container">
					服务：
					<view class="service-item" v-for="(item1,index1) in item.services" :key="index1">
						<text :class="['myicon',item1.icon]"></text>
						<text>{{item1.name}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view :style="{height:`${constant.bottom_bar_height}px`}">
			<BottomBar v-model='barIndex'  :barlists="barlists"/>
		</view>
	</view>
</template>

<script>
	import config from '@/pages/water/config.js'
	
	export default {
		data() {
			return {
				form:{
				},
				barIndex:2,
				constant:this.constant,
				baseURL:this.baseURL,
				location:uni.getStorageSync('location'),
				barlists:config.barlists,
				shops: []
			}
		},
		async onLoad() {
			let locationRes = await this.util.getLocation();
			console.log('locationRes',locationRes)
			if(locationRes.code==1){
				this.location = locationRes
			}
			this.get('crud/list',{table:'mch'}).then(({code,paginate})=>{
				if(code===1){
					this.shops = paginate.data.map(i=>{
						i.services = JSON.parse(i.services)
						i.id = i.mch_id
						i.width= uni.upx2px(40)
						i.height= uni.upx2px(60)
						i.distance= this.util.GetDistance(this.location.latitude,this.location.longitude,i.latitude,i.longitude)
						i.callout= {
							content: i.name,
							display: "ALWAYS"
						}
						return i
					})
					this.shops.sort((j,k)=>j.distance-k.distance)
					this.paginate = paginate
				}
			})
		},
		methods: {
			openMap(item) {
				uni.openLocation({
					latitude: item.latitude*1,
					longitude: item.longitude*1,
					success: function () {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.index-container {
		height: 100vh;
		overflow: hidden;

		.header-left {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #ffffff;

			.address {
				// max-width: 300upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.header-center {
			font-size: 32rpx;
			color: #ffffff;
		}

		.map-container {
			width: 750rpx;
			height: 750rpx;
			position: relative;

			.picker-container {
				padding: 10rpx 20rpx;
				border-radius: 40rpx;
				position: absolute;
				top: 30rpx;
				right: 10rpx;
				background: $base-color;

				.flex-ac {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #ffffff;

					.u-icon {
						margin-left: 10rpx;
						transform: rotate(90deg);
					}
				}
			}

			.uploader-container {
				position: absolute;
				bottom: 100rpx;
				right: 10rpx;
				background: $base-color;
				text-align: center;
				font-size: 24rpx;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 120rpx;height: 120rpx;
				border-radius: 50%;
				
				view{
					margin-top: -10rpx;
				}
			}


		}

		.scroll-container {
			background: #f7f7f7;
			height: calc(100vh - var(--status-bar-height) - 750rpx - 44px);

			.list-item {
				border-radius: 16rpx;
				background: #ffffff;
				width: 690rpx;
				margin-left: 30rpx;
				margin-top: 30rpx;
				padding: 30rpx;
				box-sizing: border-box;

				.north-container {
					display: flex;
					align-items: center;
					padding-bottom: 20rpx;

					&>image {
						flex-shrink: 0;
						width: 120rpx;
						height: 120rpx;
						border-radius: 10rpx;
					}

					.base-info-container {
						flex-grow: 1;
						height: 160rpx;
						margin: 0rpx 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.name {
							font-size: 28rpx;
							color: $base-color;
						}

						.address,
						.open-time {
							font-size: 24rpx;
							color: $font-color-light;
						}
					}

					.action-container {
						width: 140rpx;
						flex-shrink: 0;
						height: 160rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;

						.tag-container {
							display: flex;
						}

						.distance {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: $font-color-light;
						}
					}
				}

				.footer-container {
					padding-top: 20rpx;
					display: flex;
					align-items: center;

					.service-item {
						margin-right: 20rpx;
						display: flex;
						align-items: center;

						image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 10rpx;
						}

						text {
							font-size: 28rpx;
							color: #333333;
						}
					}
				}
			}
		}
	}
</style>